﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Resource/Jquery/jquery-1.10.2.js"></script>
    <script src="js/esl.js"></script>
</head>
<body>
    <div id="mainPie" style="height: 500px; border: 1px solid #ccc; padding: 5px;"></div>
</body>
</html>
<script>
    require.config({
        paths: {
            echarts: './js/echarts',
            'echarts/chart/bar': './js/echarts-map',
            'echarts/chart/line': './js/echarts-map',
            'echarts/chart/map': './js/echarts-map'
        }
    });

    require(
    [
        'echarts',
        'echarts/chart/bar',
        'echarts/chart/line',
        'echarts/chart/map'
    ],
    function (ec) {
        var myChart2 = ec.init(document.getElementById('mainPie'));

        $.ajax({
            type: "GET",
            url: "Ajax.aspx",
            data: { uid: 1, tag: "pie" },
            dataType: "text",
            success: function (data) {
                _data = eval(data);
                var config = new configPie({
                    data: _data,
                    title: "xxx",
                    series_name: "我是详细信息",
                    legend_x: "",
                });

                var op = config.createPieArguments();

                myChart2.setOption(op);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert("HTTP请求错误代码:" + jqXHR.status + ",描述:" + jqXHR.statusText);
            }
        });
    }
    );

    var configPie = function (option) {
        this.property = {
            title: "",
            subtext: "",
            algin: "",
            legend_x: "",
            legend_y: "",
            legend_orient: "vertical",
            series_name: "",
        };

        this.extend = function () {
            for (var i in option) {
                if (option.hasOwnProperty(i)) {
                    this.property[i] = option[i];
                }
            }
        }

        this.title = function () {
            return {
                text: this.property.title == "" ? "请设置title" : this.property.title,
                subtext: this.property.subtext == "" ? "请设置描述" : this.property.subtext,
                x: this.property.algin == "" ? "center" : "left"
            };
        }

        this.toolTip = function () {
            return {
                trigger: 'item',
                formatter: function (val) {
                    return val[0] + "<br/>" + val[1] + ":" + val[2] + "<br/>所占百分比:" + val[3] + "%";
                }
            };
        }

        this.legend = function () {
            return {
                orient: this.property.legend_orient,
                x: this.property.legend_x == "" || this.property.legend_x == undefined ? "left" : this.property.legend_x,
                y: this.property.legend_y == "" || this.property.legend_y == undefined ? "top" : this.property.legend_y,
                data: this.getNames(this.property.data)
            };
        }
        this.series = function () {
            return [
                {
                    name: this.property.series_name == "" ? "详细信息" : this.property.series_name,
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: this.property.data
                }
            ]
        }
        this.getNames = function (data) {
            var cells = [];
            for (var i = 0; i < data.length; i++) {
                cells.push(data[i].name);
            }
            return cells;
        }

        this.createPieArguments = function () {
            this.extend();
            if (this.property.data == undefined) {
                alert("请先载入数据!");
            }
            return {
                title: this.title(),
                tooltip: this.toolTip(),
                legend: this.legend(),
                series: this.series()
            }
        }
    }
</script>
